<!--



表格模板

将自己所需要显示的表格页面的路径，填入对应导航栏选项的index值中

-->


<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="static/js/vue.js"></script>
    <script type="text/javascript" src="static/js/index.js"></script>
    <link rel="stylesheet" href="static/css/index.css">
    <title>Document</title>
    <script type="text/javascript" src="static/js/axios.min.js"></script>
</head>


<style>
    .el-table .warning-row {
        background: rgb(126, 238, 35);
    }


    .el-table .success-row {
        background: #f0f9eb;
    }

    /*
    包裹表格div的距離外邊距的距離
    width:85% 為寬度
    margin：為左边距
    margin-top為右边距
    */

    #app {
        width: 100%;


    }
</style>

<body>

<div id="app">




    <template>

        <el-table :data="tableData2" style="width: 100%">
            <el-table-column prop="channel" label="渠道名称" width="180"></el-table-column>
            <el-table-column  :formatter="dataFormat" prop="registerDate" label="注册日期" width="180"></el-table-column>
            <el-table-column prop="registeredUsersNums" label="注册数"></el-table-column>
            <el-table-column prop="firstApplyNums" label="首次申请数"></el-table-column>
            <el-table-column prop="submitAuditNums" label="提交审核数"></el-table-column>
            <el-table-column prop="auditPassNums" label="审核通过数"></el-table-column>
            <el-table-column prop="loanNums" label="放款数"></el-table-column>
            <el-table-column prop="loanOrderAmount" label="放款订单金额"></el-table-column>
        </el-table>
        </template>

    <!--table 模板 ：data 绑定了数据 tableData-->
    <template>
        <el-table
                :data="tableData"
                style="width: 100%"
                :header-cell-style="{'text-align':'center'}"
                :cell-style="{'text-align':'center'}">
            <el-table-column
                    :formatter="dataFormat"
                    fixed
                    prop="statisticalDate"
                    label="统计日期"
                    width="180">
            </el-table-column>

            <el-table-column
                    prop="firstApplyNums"
                    label="首次申请数"
                    width="170">
            </el-table-column>
            <el-table-column
                    prop="submitAuditNums"
                    label="提交审核数"
                    width="170">
            </el-table-column>
            <el-table-column
                    prop="auditPassNums"
                    label="审核通过数"
                    width="170">
            </el-table-column>
            <el-table-column
                    prop="loanNums"
                    label="放款数"
                    width="170">
            </el-table-column>

            <el-table-column
                    prop="loanOrderAmount"
                    label="放款订单金额"
                    width="170">
            </el-table-column>

        </el-table>
        <!--Element分頁插件 有待改进-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="10"
                layout="total, prev, pager, next, jumper"
                :total="totalCount">
        </el-pagination>
    </template>
</div>
</body>


<script type="text/javascript" th:inline="javascript">
let quan='';

    var demo = new Vue({
        el: "#app", //绑定的div
        data() {
            return {

                restaurants: [],
                state1: '',
                state2: '',

                dialogFormVisible: false,  //这是点击编辑之后，原本隐藏的 编辑框就变为true，就显示编辑框
                // 总数据
                tableData: [],
                tableData2: [],
                // 默认显示第几页
                currentPage: 1,
                // 总条数，根据接口获取数据长度(注意：这里不能为空)
                totalCount: 1,
                // 个数选择器（可修改）
                pageSizes: [1, 2, 3, 4],
                // 默认每页显示的条数（可修改）
                PageSize: 1,
            }
        },
        methods: {

            //时间格式转换
            dataFormat: function(row,column) {
                //获取表格数据
                let data = row[column.property]
                if (data === null) {
                    return ''
                }
                let dt = new Date(data)
                return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate()
            },

            getData2(val){
                // 这里使用axios，使用时请提前引入
                axios.get("usercon/one",{
                        params:{
                            channel: quan
                        }
                    },{emulateJSON: true},
                    {
                        headers:{"Content-Type": "application/x-www-form-urlencoded;charset=utf-8",}
                    }
                ).then(reponse=>{
                    console.log(reponse)
                    // 将数据赋值给tableData
                    let table1=[];
                    table1.push(reponse.data);
                    this.tableData2=table1
                })
            },

            getData(val) {
                // 这里使用axios，使用时请提前引入
                axios.get("usercon/def", {
                        params: {
                            limit: 10,
                            pageNum: this.currentPage,
                            channel: quan
                        }
                    }, {emulateJSON: true},
                    {
                        headers: {"Content-Type": "application/x-www-form-urlencoded;charset=utf-8",}
                    }
                ).then(reponse => {
                    console.log(reponse)
                    // 将数据赋值给tableData
                    this.tableData = reponse.data.rows
                    // 将数据的长度赋值给totalCount
                    this.totalCount = reponse.data.total
                })
            },
            handleSizeChange(val) {
                // 改变每页显示的条数
                this.PageSize = val
                // 注意：在改变每页显示的条数时，要将页码显示到第一页
                this.currentPage = 1
            },
            // 显示第几页
            handleCurrentChange(val) {

                this.currentPage = val;
                this.getData()
            },
            querySearch(queryString, cb) {
                var restaurants = this.restaurants;
                var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            createFilter(queryString) {
                return (restaurant) => {
                    return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },
            loadAll() {
                return [
                    {"value": "阳阳麻辣烫", "address": "天山西路389号"},
                    {"value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13"}
                ];
            },
            handleSelect(item) {
                console.log(item);
            }

        },
        created: function () {
           /* let url = decodeURI(window.location.href); //获取url中"?"符后的字串 ('?modFlag=business&role=1')*/
            function GetRequest() {
                var url = decodeURI(decodeURI(location.search)); //获取url中"?"符后的字串
                var theRequest = new Object();
                if (url.indexOf("?") != -1) {
                    var str = url.substr(1);
                    strs = str.split("&");
                    for(var i = 0; i < strs.length; i ++) {
                        theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
                    }
                }
                return theRequest;
            }
            quan=GetRequest().aaa;
            this.getData(GetRequest().aaa);
            this.getData2(GetRequest().aaa);

        },
        mounted() {
            this.restaurants = this.loadAll();
        }

    })


</script>
</html>